<!--
 * @Description  : 
 * @Author       : 陈韵同
 * @Date         : 2021-02-02 18:10:37
 * @LastEditTime : 2021-03-16 13:46:56
 * @LastEditors  : 陈韵同
 * @FilePath     : e:\协同云组件库\新建文件夹 (2)\cloud-components\docs\pages\components\cloud-dialog\example1.vue
-->
<template>
  <div>
    <CloudButton @click="onClick('success')">success</CloudButton>
    <CloudButton @click="onClick('warning')">warning</CloudButton>
    <CloudButton @click="onClick('error')">error</CloudButton>
    <CloudButton @click="onClick('info')">info</CloudButton>
    <CloudDialog
      :type="type"
      title="hello"
      contentTitle="hi"
      contentText="nice to meet you"
      centered
      :maskClosable="false"
      :visible="visible"
      @cancel="handleCancel"
      @ok="handleOk"
      okText="Yes"
      cancelText="No"
    ></CloudDialog>
  </div>
</template>

<script>
export default {
  title: '1.基础用法',
  data() {
    return {
      visible: false,
      type: 'success'
    }
  },
  methods: {
    onClick(type) {
      this.type = type;
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
      console.log("No");
    },
    handleOk() {
      this.visible = false;
      console.log("Yes");
    }
  }
}
</script>

<style lang="scss">
</style>